{include file="public/header" /}
<link rel="stylesheet" type="text/css" href="/static/admin/webupload/webuploader.css">
<link rel="stylesheet" type="text/css" href="/static/admin/webupload/style.css">
<link href="/static/admin/css/select2.min.css" rel="stylesheet">
<style>
    .file-item{float: left; position: relative; width: 110px;height: 110px; margin: 0 20px 20px 0; padding: 4px;}
    .file-item .info{overflow: hidden;}
    .uploader-list{width: 100%; overflow: hidden;}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>编辑轮播图</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal" id="signupForm" method="post">
                        <input type="hidden" name="id" value="{$info.id}">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">上传图片</label>
                            <div class="input-group col-sm-4">
                                <!--dom结构部分-->
                                <div id="uploader-demo">
                                    <!--用来存放item-->
                                    <div class="file-item thumbnail" id="imgDiv">
                                        <input type="hidden" name="img" value="{$info.img}">
                                        <img id="img" src="{$info.img}" width="100px">
                                    </div>

                                    <div id="imgFileList" class="uploader-list"></div>
                                    <div id="imgFilePicker">选择图片</div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">标题：</label>
                            <div class="input-group col-sm-4">
                                <input type="text" name="title" class="form-control" value="{$info.title}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">内部路由：</label>
                            <div class="input-group col-sm-4">
                                <input type="text" name="target_route" class="form-control" value="{$info.target_route}">
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">
                                <button id="formSubmit" type="submit" class="btn btn-primary"><i class="fa fa-check"></i> 提交</button>&nbsp;&nbsp;&nbsp;
                                <a class="btn btn-danger" href="javascript:history.go(-1);"><i class="fa fa-close"></i> 返回</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
{include file="public/footer" /}
<script type="text/javascript" src="/static/admin/webupload/webuploader.min.js"></script>
<script src="/static/admin/js/select2.full.min.js"></script>
<script type="text/javascript">

// 初始化Web Uploader
var uploader = WebUploader.create({

    // 选完文件后，是否自动上传。
    auto: true,

    // swf文件路径
    swf: '__ADMIN__/webupload/Uploader.swf',

    // 文件接收服务端。
    server: "{:url('upload/uploadImgToOss')}",

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
      pick : '#imgFilePicker',

    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },

    'onUploadSuccess': function(file, data, response) {

//            var width = file._info.width;
//            var height = file._info.height;
//
        layer.close(index2);

//            if(width != 750 || height != 470) {
//                layer.alert('图片尺寸必须为750*470')
//                $("#data_photo").val('');
//                $("#img_data").attr("src", '');
//            } else {
            $("#imgDiv").show();
            $("input[name=img]").val(data._raw);
            $("#img").attr('src', data._raw).show();
//            }
    }
});

// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
    // 显示loading
    index2 = layer.load(0, {
        shade: [0.3,'#fff']
    });
});

// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
    layer.msg('上传失败');
});

//以下为官方示例
$().ready(function () {

    // validate signup form on keyup and submit
    var icon = "<i class='fa fa-times-circle'></i> ";
    $("#signupForm").validate({
        rules: {
            img: {
                required: true,
            },
            title: {
                required: true,
            },
            target_route: {
                required: true,
            },
        },
        focusCleanup:true,
        submitHandler:function(form){

            if (common.isNullOrEmpty($("input[name=img]").val())) {
                layer.msg('请上传图片');
                return false;
            }

            $(form).ajaxSubmit({
                type: 'post',
                url: "{:url('editPost')}",
                beforeSend:function() {
                    // 显示loading
                    index2 = layer.load(0, {
                        shade: [0.3,'#fff']
                    });
                    $("#formSubmit").attr('type', 'button')
                },
                success: function(data){

                    if (data['code'] != 1) {
                        layer.msg(data.msg,{icon:2,time:1000,shade: 0.1,}, function(index){
                            layer.close(index)
                        });
                        $("#formSubmit").attr('type', 'submit')
                        return false;
                    }

                    layer.msg(data.msg,{icon:1,time:1000,shade: 0.1,}, function(index){
                        window.location.href="{:url('index')}"
                    });
                },
                error: function(XmlHttpRequest, textStatus, errorThrown){
                    layer.msg('error!',{icon:1,time:1000});
                },
                complete:function() {
                    // 隐藏loading
                    layer.close(index2);
                }
            });
        }
    });
});
</script>
</body>
</html>